<template>
    <div class="main-layout">
        <el-container class="container">
            <el-header class="header">
                <Header></Header>
            </el-header>

            <el-container class="right-container">
                <el-aside class="aside" :style="{ width: asideCollapse ? '63.5px' : '200px' }">
                    <Aside @showUrl="showUrl" @toggleCollapse="toggleCollapse"></Aside>
                </el-aside>
                <el-main class="right-main" id="mainLayout">
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Aside from './aside.vue'
import Header from './header.vue'
import { useRouter, RouterView } from 'vue-router'
let $router = useRouter()
const showUrl = (url: string) => {
    console.log(url, 'sss')
    $router.push(url)
}
// 侧边栏折叠
const asideCollapse = ref(false)
const toggleCollapse = (isCollapse: boolean) => {
    asideCollapse.value = isCollapse
}
</script>

<style scoped lang="scss">
.main-layout {
    height: 100vh;
    width: 100vw;

    .container {
        .header {
                height: 50px;
                background-color: #8037e7;
            }

        .right-container {
           
            .aside {
            transition: all 0.3s;
            height: calc(100vh - 50px);
            background-color: #ebebeb;
        }
            .right-main {
                height: calc(100vh - 50px);
                background-color: #fff;
            }
        }

    }

}
</style>
